<template>
  <main>
    <el-row :gutter="6">
      <el-col :span="12">
        <div class="externalBox">
          <role @roleRowClick="roleRowClick" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="externalBox">
          <tenant :tenantList="tenantList" :tenantLoading="tenantLoading" />
        </div>
      </el-col>
      <el-col :span="4">
        <div class="externalBox">
          <el-tabs name="api">
            <el-tab-pane label="菜单权限">
              <!-- @check="handleCheckApiPerm" -->
              <el-tree
                :data="apiPerms"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
              >
                <!-- :props="defaultProps" -->
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="数据权限" name="data">
              <!-- @tab-click="handleClickDataPerm" -->
              <!-- v-model="entityTypeCode" -->
              <el-tabs tab-position="left" style="height: 200px">
                <el-tab-pane
                  v-for="item in entities"
                  :key="item.code"
                  :label="item.remark"
                  :name="item.code + ''"
                >
                  <!-- @change="handleModifyDataPerm" -->
                  <el-checkbox-group v-model="item.dataPermList">
                    <el-checkbox
                      v-for="dataPerm in dataPerms"
                      :key="dataPerm.id"
                      :label="dataPerm.id"
                      >{{ dataPerm.name }}</el-checkbox
                    >
                  </el-checkbox-group>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </main>
</template>

<script>
import role from "./role/index.vue";
import tenant from "./tenant/index.vue";

export default {
  name: "Role",
  components: {
    role,
    tenant,
  },
  data() {
    return {
      apiPerms: [],
      entities: [],
      dataPerms: [],
      tenantList: [],
      tenantLoading: false,
    };
  },
  created() {
    this.getEntityType();
    // this.getEntity();
    this.getPermListInAuth();
  },
  methods: {
    /**
     * 获取权限实体类型
     */
    getEntityType() {
      this.$store.dispatch("authEntity/getEntityTypes").then((res) => {
        if (res.code === 0) {
          this.entities = res.data;
        }
      });
    },
    /**
     * 通过类型编码获取权限实体
     */
    // getEntity(typeCode) {
    //   this.$store.dispatch("authEntity/getByTypeCode", typeCode).then((res) => {
    //     if (res.code === 0) {
    //       this.dataPerms = res.data;
    //     }
    //   });
    // },
    /**
     * 查询当前租户权限列表菜单
     */
    getPermListInAuth() {
      this.$store.dispatch("menu/getPermListInAuth").then((res) => {
        if (res.code === 0) {
          this.apiPerms = res.data;
        }
      });
    },
    // 根据角色ID查询租户
    async roleRowClick(id) {
      this.tenantLoading = true;
      const data = await this.$store.dispatch("tenant/queryTenantByRoleId", id);
      console.log(data);
      if (data.code === 0 && data.data !== null) {
        this.tenantList = data.data;
      } else {
        this.tenantList = [];
      }
      this.tenantLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
main {
  padding: 8px;

  .externalBox {
    padding: 5px;
    background: #fff;
    height: 100vh;
  }
}
</style>
